Мы начинаем пятый урок посвященный редактированию шаблонов в CMS Joomla 3, на этот раз мы поговорим о футере для сайта. Разберем возможные варианты оформления футера и некоторые подходы к его созданию.
Что такое футер
Футером или подвалом сайта называют самую нижнюю его часть, в которой, как правило, содержится информация о сайте, об авторских правах и т.д. В стандартном исполнении в шаблоне Protostar, футер не содержит какую либо значимую информацию:
Стандартное содержание футера такое – текущий год, имя сайта и ссылка «Наверх» ведущая в начало страницы. Если честно такой вариант футера совершенно бесполезен посетителям нашего сайта, кроме того ссылка «Наверх» в нашем случае абсолютно не нужна, мы для этих целей уже сделали красивую кнопку.
Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
© <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
А теперь удалим лишний код с 210 по 217 строку, в результате код для футера будет таким:
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
</div>
</footer>
По сути, мы удалили все что можно, оставив лишь возможность вывода модулей в футере, за это отвечает строка:
<jdoc:include type="modules" name="footer" style="none" />
Сохраняем индексный файл, переходим на сайт и обновляем страницу. Содержимое футера исчезло, этого мы и добивались. Теперь можно добавлять в футер новую информацию по своему усмотрению, но прежде чем её добавить стоит ответить на вопрос – а что может находиться в футере сайта?
Какую информацию отображать в футере сайта
Для того чтобы сделать футер эффективным в нем должна присутствовать информация которая может заинтересовать посетителей сайта. В зависимости от направленности сайта эта информация может отличаться. Вот небольшой пример той самой информации, которая может содержаться в футере:
- Дополнительное меню – это меню может дублировать уже существующее, либо быть уникальным. Дублировать меню в футер полезно, когда на Ваш сайт часто заходят с мобильных устройств, посетитель, пролистав страницу в самый низ, может воспользоваться дополнительной навигацией по сайту.
- Контактная информация – для продающих сайтов, либо для сайтов которые оказывают различные услуги наличие контактной информации просто необходимо, а в футере ей самое место.
- Кнопки социальных сетей – в современном мире социальные сети для многих людей это есть все, поэтому подобная информация лишней никогда не будет.
- Различные ссылки – например, ссылки на карту сайта, ленты новостей и т.д.
- Виджеты – можно вывести в футер информацию отражающую активность на сайте, счетчики посещаемости, последние комментарии и т.п.
- Реклама - наступает момент, когда хочется получить от сайта не только его наличие, но и прибыль, в этом случае футер может быть не плохим контейнером для рекламы.
Не пытайтесь впихнуть в футер своего сайта все вышеперечисленное, переизбыток информации, как и его отсутствие, так же ни к чему хорошему не приведет.
С другой стороны не важно, какая информация будет содержаться в футере вашего сайта, главное чтобы она вписывалась в общий дизайн и была красиво оформлена.
Создание футера для сайта
Теперь давайте отбросим теорию и приступим непосредственно к созданию футера. Способов формирования футера может быть несколько:
- Автоматический – подразумевает использование различных модулей для вывода определенной информации
- Ручной – модули не используются, все изменения вносятся вручную по средствам редактирования файлов шаблона
- Смешанный – в данном случае используются оба вышеперечисленных варианта совместно
Каждый из способов по-своему хорош, например, на первоначальном этапе использование модулей значительно упростит задачу, а метод когда модули не используется, ускорит загрузку страницы. В любом случае выбор остается за Вами.
Для того чтобы рассмотреть все возможные варианты я остановлю свой выбор на третьем варианте. Таким образом, у Вас будет общее представление, что и как редактируется.
В качестве примера я решил разбить футер на три вертикальные части, слева будут выведены ссылки на определенные страницы сайта, в центре будет некое подобие логотипа, справа выведем небольшой текст. За отображение левой и правой части футера будут отвечать модули, а логотип пропишем руками в индексном файле.
Для начала создадим новые позиции для модулей в футере (как это сделать мы говорили на уроке по настройке и редактированию шаблонов) в количестве двух штук. Так как они будут располагаться в левой и правой части футера то и имя у них получилось соответствующее - footer-left и footer-right. Объявляем их в файле templateDetails.xml.
Теперь вносим изменения в индексный файл шаблона, мой код получился таким:
<div class="foot-left"><jdoc:include type="modules" name="footer-left" style="none" /></div> <div class="foot-center"> <a href="/" title="Joom4all - создай свой сайт с нуля"> <img alt="Joom4all - создание сайта от А до Я" class = "foot-img" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/joom4all.png'?>" /> </a> </div> <div class="foot-right"><jdoc:include type="modules" name="footer-right" style="none" /></div>
И для наглядности скриншот:
Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:
<img alt="альтернативный текст" class = "foot-img" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/joom4all.png'?>" />
На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:
- <?php – начало php кода
- echo – отвечает за вывод строки
- $this->baseurl – данная строка возвращает имя сайта
- templates/ – тут мы указываем, что изображение хранится в папке templates
- $this->template – возвращает имя текущего шаблона
- /images/joom4all.png – путь до изображения внутри корневой папки шаблона и имя файла с изображением
- ?> - конец php кода
В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.
Сохраняем файл index.php, теперь его можно закрыть, он нам больше не пригодится.
Теперь создадим несколько модулей, которые выведем в только что созданных новых позициях. Первый модуль будет выводить меню в футере, а второй небольшой текст.
Я для примера создал новое меню с несколькими пунктами специально для футера (тем, кто забыл, как создавать меню прочитайте уроки – как создать новое меню и как создавать пункты меню):
На следующем этапе создаем модули – для меню с типом «Меню» и для текста с типом «HTML-код» (как создать модуль). В качестве позиций для них выбираем только что созданные позиции модулей:
Чтобы отличать наше меню для футера среди остального меню на сайте, в настройках модуля меню добавляем к нему суффикс класса «_footer»:
Для того чтобы не объяснять что за модуль с типом «HTML-код» я покажу принцип его действия на скриншоте:
Я заполнил данный модуль определенным текстом, который будет выведен в футер, кроме обычного текста я написал небольшой php код, который отображает текущий год:
<?php echo date('Y'); ?>
Сохраняем модули и идем на сайт для проверки результата и вот что у меня получилось:
Результат хоть и есть, но не сильно впечатляет. Теперь нам необходимо более адекватно оформить элементы футера при помощи CSS.
Для начала оформим новые блоки футера:
.foot-left, .foot-center{float: left;} /*выравнивание блоков футера*/
.foot-left {width: 20%;} /*ширина левого блока*/
.foot-center {margin-left: -6px;} /*отступ центрального блока*/
.foot-right { /*правый блок*/
float: none;
height: 60px;
}
Следующий кандидат на оформление это меню, к которому я применил следующие стили:
ul.nav.menu_footer {margin: 0;} /*нулевые отступы у меню*/
ul.nav.menu_footer li { /*оформление текста меню*/
font-family: 'Lobster', cursive;
font-size: 16px;
line-height: 18px;
}
ul.nav.menu_footer li.item-179 a { /*пункт меню Карта сайта*/
margin-left: 15px;
color: #fc8f30;
}
ul.nav.menu_footer li.item-180 a { /*Пункт меню О сайте*/
color: #5aa426;
border-top: 3px solid #5aa426;
}
ul.nav.menu_footer li.item-181 a { /*Пункт меню Контакты*/
margin-left: 45px;
border-bottom: 3px solid #0f70ad;
color: #0f70ad;
}
И в завершении отделяем футер от основной части контента:
footer.footer hr {border-top: 3px solid #fc8f30;} /*отделяем футер от основного контента*/
Сохраняем файл стилей, переходим на сайт и смотрим на результат:
Вот мы и создали футер для нашего сайта, который смотрится гораздо веселее, чем стандартный. На этом данный урок считаю заершенным, а в следующем уроке мы проверим возможные ошибки адаптивного дизайна и исправим некоторые недочёты. Кроме того советую почитать статью о том как создать шаблон Joomla 3 и в частности футер с нуля быстро при помощи Bootstrap.
